<script lang="ts" setup>
import { ForkOutlined } from '@vicons/antd'
import { getTaskStatusClass, useFlowStore } from '../../flowStore'

import Card from '../component/card/index.vue'
import OperateBtn from '../component/operate-btn/index.vue'

import ApproverComponent from '../approver-component/index.vue'
import ConditionComponent from '../condition-component/index.vue'
import EndComponent from '../end-component/index.vue'
import ParallelComponent from '../parallel-component/index.vue'
import TriggerComponent from '../trigger-component/index.vue'

const props = defineProps(["node"])
const flowStore = useFlowStore()

</script>
<template>
    <div>
        <div class="flow-branch-node">
            <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), 'flow-node-btn branch-btn']"
                @click="flowStore.addNode(props.node.nodeId, '3')">
                {{ ["0"].includes(flowStore.mode) ? "添加条件" : "条件节点" }}
            </div>
            <div v-for="(condition, conditionIndex) in props.node?.branchNodeList" :key="condition.nodeId"
                :class="['flow-branch-node-item-wrapper']">
                <div
                    :class="['flow-branch-node-item', { 'left': conditionIndex === 0 }, { 'right': conditionIndex === props.node?.branchNodeList.length - 1 }]">
                    <div class="flow-node">
                        <card :node="condition">
                            <template #icon>
                                <fork-outlined />
                            </template>
                            <span v-if="condition.config.conditionExpression !== ''">{{ condition.config.conditionExpression
                            }}</span>
                            <span v-if="!condition.config.conditionExpression">请输入条件表达式</span>
                        </card>
                        <div class="flow-operate">
                            <operate-btn :node="condition" />
                        </div>
                    </div>

                    <div v-for="conditionChild in condition.children" :key="conditionChild.nodeId"
                        class="flow-node-container">

                        <approver-component v-if="conditionChild.nodeType === '1'" :node="conditionChild" />

                        <condition-component v-if="conditionChild.nodeType === '2'" :node="conditionChild" />

                        <parallel-component v-if="conditionChild.nodeType === '4'" :node="conditionChild" />

                        <trigger-component v-if="conditionChild.nodeType === '6'" :node="conditionChild" />

                        <end-component v-if="conditionChild.nodeType === '9'" :node="conditionChild" />
                    </div>
                </div>
            </div>

            <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), 'flow-node-btn end']"
                @click="node.isEdit = true">
                条件结束
            </div>
            <div class="flow-branch-operate">
                <operate-btn :node="props.node" />
            </div>
        </div>

        <div v-for="child in props.node.children" :key="child.nodeId" class="flow-node-container">

            <approver-component v-if="child.nodeType === '1'" :node="child" />

            <condition-component v-if="child.nodeType === '2'" :node="child" />

            <parallel-component v-if="child.nodeType === '4'" :node="child" />

            <trigger-component v-if="child.nodeType === '6'" :node="child" />

            <end-component v-if="child.nodeType === '9'" :node="child" />
        </div>
    </div>
</template>
<style scoped></style>